<template>
  <div style="min-height: 0;" class="root">
    <!--    顶部-->
    <div class="top">
      <q-toolbar class="row justify-between">
        <div style="width: 70vw;">
          <q-card
            class="my-card text-white"
            flat
            style="background: none;display: flex;"
          >
            <q-img src="~assets/logo.png" style="height: 3vw; width: 3vw;" contain/>
            <q-card-section>
              <div class="text-bold" style="font-size: 20px;">百诺数字环保</div>
            </q-card-section>
          </q-card>
        </div>
        <div style="width: 30vw;position: absolute;margin-left: 60vw;" class="row justify-between q-mt-md ">
          <q-btn flat class="text-weight-bold" style="font-size: 24px;">云档案</q-btn>
          <q-btn flat class="text-weight-bold" style="font-size: 24px;">云监管</q-btn>
          <q-btn flat class="text-weight-bold" style="font-size: 24px;">云服务</q-btn>
        </div>

        <div class="row justify-end" style="line-height: 2vw;height: 2vw;width: 45vw;">
          <q-icon name="light_mode" color="yellow" size="2vw" class="q-mr-md"></q-icon>
          <span class="q-mr-md">晴</span>
          <span class="q-mr-md">10~18 &#8451;</span>
          <span class="q-mr-md">7月24日</span>
          <span>9:30</span>
        </div>
      </q-toolbar>
    </div>
    <!--下方-->
    <div class="row " style="width: 140vw;">
      <!--            左侧-->
      <ChartsLeft :citys="citys"></ChartsLeft>

      <!--            地图-->
      <div class="q-mx-md q-mt-lg" id="container"
           style="width: 62vw;height: 80vh;background: rgba(0,0,0,.5);position: absolute;left: 38vw;top:10vh;"></div>
      <!--      占位-->
      <div style="width: 62vw"></div>
      <!--            右侧-->
      <ChartsRight :citys="citys" :currentCity="currentCity"></ChartsRight>

    </div>

  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import getBounds from "src/net/map/areaBound/getBounds";
import ChartsLeft from "layouts/chartsLeft/ChartsLeft";
import axios from "axios";
import ChartsRight from "layouts/chartsRight/ChartsRight";

const url = 'src/assets/logo.png'
const citys = ['杭州市', '金华市', '丽水市', '衢州市',
  '温州市', '台州市', '绍兴市', '宁波市', '嘉兴市', '湖州市']

export default {
  name: 'MainLayout',
  components: {ChartsLeft, ChartsRight},
  data() {
    return {
      url, // logo
      citys,
      map: null, // 地图对象
      loca: null,
      currentCity: '杭州市',// 当前选择的城市
      // tracks, //轨迹
      track: [], // 轨迹数据数组
      subDistrict: [], // 下级区域信息
      district: null // 区域查询对象
    }
  },
  methods: {


    areaFill() { // 区域填充

      //just some colors
      var colors = [
        "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
      ];
      const that = this
      AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {

        //创建一个实例
        var districtExplorer = new DistrictExplorer({
          map: that.map
        });


        function renderAreaNode(areaNode) {

          //绘制子区域
          districtExplorer.renderSubFeatures(areaNode, function (feature, i) {

            var fillColor = colors[i % colors.length];
            var strokeColor = colors[colors.length - 1 - i % colors.length];

            return {
              cursor: 'default',
              bubble: true,
              strokeColor, // 线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 1, //线宽
              fillColor, // 填充色
              fillOpacity: 0.35, //填充透明度
            };
          });

          //绘制父区域
          districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: 'black', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.35, //填充透明度
          });
        }

        // var adcodes = [310000, 330100, 330200];
        var adcodes = [330000]; // 区域代码
        districtExplorer.loadMultiAreaNodes(adcodes, function (error, areaNodes) {

          //清除已有的绘制内容
          districtExplorer.clearFeaturePolygons();
          console.log(areaNodes)

          for (var i = 0, len = areaNodes.length; i < len; i++) {
            renderAreaNode(areaNodes[i]);
          }

          //更新地图视野
          // that.map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
      });
    },
    AreaLoader() { // 镂空省和市
      AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {

        initPage(DistrictExplorer);
      });

      function getAllRings(feature) {

        var coords = feature.geometry.coordinates,
          rings = [];

        for (var i = 0, len = coords.length; i < len; i++) {
          rings.push(coords[i][0]);
        }

        return rings;
      }

      function getLongestRing(feature) {
        var rings = getAllRings(feature);

        rings.sort(function (a, b) {
          return b.length - a.length;
        });

        return rings[0];
      }

      function initPage(DistrictExplorer) {
        //创建一个实例
        var districtExplorer = new DistrictExplorer({
          map: map
        });

        var countryCode = 100000, //全国
          provCodes = [
            110000, //北京
            510000 //四川
          ],
          cityCodes = [
            //230100, //哈尔滨
            // 331100 //丽水
          ];

        districtExplorer.loadMultiAreaNodes(
          //只需加载全国和市，全国的节点包含省级
          [countryCode].concat(cityCodes),
          function (error, areaNodes) {

            var countryNode = areaNodes[0],
              cityNodes = areaNodes.slice(1);

            var path = [];

            //首先放置背景区域，这里是大陆的边界
            path.push(getLongestRing(countryNode.getParentFeature()));


            for (var i = 0, len = provCodes.length; i < len; i++) {
              //逐个放置需要镂空的省级区域
              path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));
            }

            for (var i = 0, len = cityNodes.length; i < len; i++) {
              //逐个放置需要镂空的市级区域
              path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
            }

            //绘制带环多边形
            //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
            var polygon = new AMap.Polygon({
              bubble: true,
              lineJoin: 'round',
              strokeColor: 'red', //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 1, //线宽
              fillColor: 'black', //填充色
              fillOpacity: 0.65, //填充透明度
              map: map,
              path: path
            });
          });
      }
    },
    mapFill(city, fillColor) {
      var district = null;  // 地图填充
      var polygons = [];
      const map = this.map;

      function drawBounds() {
        //加载行政区划插件

        //实例化DistrictSearch
        var opts = {
          subdistrict: 0,   //获取边界不需要返回下级行政区
          extensions: 'all',  //返回行政区边界坐标组等具体信息
          level: 'city'  //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);

        //行政区查询
        district.setLevel('city')

        district.search(city, function (status, result) {
          map.remove(polygons)//清除上次结果
          polygons = [];
          var bounds = result.districtList[0].boundaries;
          if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
              //生成行政区划polygon
              var polygon = new AMap.Polygon({
                strokeWeight: 1, // 边界粗细
                path: bounds[i], // 填充路径
                fillOpacity: 0.7, // 填充透明度
                fillColor, // 填充颜色
                strokeColor: '#0091ea' // 边界颜色
              });
              polygons.push(polygon);
            }
          }
          map.add(polygons)
          // map.setFitView(polygons);//视口自适应
        });
      }

      drawBounds();
    },

    mapGrow(dataArr) {  // 地图生长
      const map = this.map

      // 创建loca
      var loca = window.loca = new Loca.Container({
        map,
      });
      // 光线设置
      loca.ambLight = {
        intensity: 0.3,
        color: '#fff',
      };
      loca.dirLight = {
        intensity: 0.6,
        color: '#fff',
        target: [0, 0, 0],
        position: [0, -1, 1],
      };
      loca.pointLight = { // 点光源
        color: 'rgb(100,100,100)',
        position: [116.23535, 39.86759, 20000],
        intensity: 3,
        // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
        distance: 50000,
      };
      // let posts = await this.boundsRequest()
      let geo = formmatPosts(dataArr);
      console.log(geo);

      // let geoO =JSON.parse(geo)
      function formmatPosts(posts) { // 格式化请求的数据
        console.log(posts)
        let geo = {
          "type": 'FeatureCollection',
          "features": []
        }
        let temp = {}
        let coordinates = []
        let cityName = ''
        for (let i = 0; i < posts.length; i++) {
          coordinates = []
          temp = {}
          cityName = ''
          coordinates = posts[i].data.districts[0].polyline

          // 对请求中的坐标字符串转为数组
          var res = coordinates.split(';')

          var newArr = [] // 存放转换好的坐标数组
          for (let j = 0; j < res.length; j++) {
            // console.log(res[]);
            const tem = res[j].split(',');
            // console.log(tem);
            const temp2 = []
            tem.map((value) => {
              temp2.push(Number(value))
            })
            // console.log(temp2);
            newArr.push(temp2)

          }

          cityName = posts[i].data.districts[0].name
          temp = { // 固定格式
            "type": "Feature",
            "properties": {
              "name": `${cityName}`,
              "value": 30
            },
            "geometry": {
              "type": "Polygon",
              "coordinates": [newArr]
            }
          }

          geo["features"].push(temp)
        }
        console.log(geo)
        return geo
      }

      var geoObj = new Loca.GeoJSONSource({
        data: geo
      });

      var colors = ['#00ff00', '#00ff00',
        '#00ffff', '#00ff00', '#00AF53',
        '#ff8c00', '#dc143c', '#dc143c',
        '#ff8c00', '#ff8c00'].reverse(); // 颜色组

      var pl = new Loca.PolygonLayer({
        // loca,
        zIndex: 120,
        opacity: 0.9,
        // cullface: 'none',
        shininess: 10,// 表面粗糙度
        hasSide: true,
      });

      pl.setSource(geoObj);
      // let a = Math.floor(Math.random()*10)
      pl.setStyle({
        topColor: function (index, feature) { // 顶面颜色
          // let b = Math.floor(Math.random()*10)

          return '#157574';
        },
        sideTopColor: function (index, feature) { // 侧面顶部颜色
          return '#1BE0F1';
        },
        sideBottomColor: function (index, feature) { // 面的侧面底部的颜色

          return '#15455B';
        },
        height: function (index, feature) { // 面的厚度
          return 10000;
        },
        altitude: 0, // 海拔高度，也就是面的底面的高度,米
      });
      loca.add(pl);


      // 创建纯文本标记
      var text = new AMap.Text({
        text: '纯文本标记',
        anchor: 'center', // 设置文本标记锚点
        draggable: true,
        cursor: 'pointer',
        angle: 0,
        visible: false,
        offset: [0, -25],
        style: {
          'padding': '5px 10px',
          'margin-bottom': '1rem',
          'border-radius': '.25rem',
          'background-color': 'rgba(0,0,0,0.5)',
          // 'width': '12rem',
          'border-width': 0,
          'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
          'text-align': 'center',
          'font-size': '16px',
          'color': '#fff',
        },
      });
      text.setMap(map); // 设置文本到地图
      // 拾取
      map.on('mousemove', (e) => { // 添加地图上的鼠标上事件
        var feat = pl.queryFeature(e.pixel.toArray());

        if (feat) {
          text.show();

          text.setText(feat.properties.name);
          text.setPosition(e.lnglat);

          // pl.setStyle({
          //   topColor: (index, feature) => {
          //     if (feature === feat) {
          //       return [164, 241, 199, 0.5];
          //     }
          //     var v = feature.properties.health * 100;
          //     return v < 40 ? colors[8] :
          //       v < 50 ? colors[7] :
          //         v < 55 ? colors[6] :
          //           v < 60 ? colors[5] :
          //             v < 65 ? colors[4] :
          //               v < 70 ? colors[3] :
          //                 v < 75 ? colors[2] :
          //                   v < 80 ? colors[1] :
          //                     v < 100 ? colors[0] : 'green';
          //   },
          //   sideTopColor: (index, feature) => {
          //     if (feature === feat) {
          //       return [164, 241, 199, 0.5];
          //     }
          //     var v = feature.properties.health * 100;
          //     return v < 40 ? colors[8] :
          //       v < 50 ? colors[7] :
          //         v < 55 ? colors[6] :
          //           v < 60 ? colors[5] :
          //             v < 65 ? colors[4] :
          //               v < 70 ? colors[3] :
          //                 v < 75 ? colors[2] :
          //                   v < 80 ? colors[1] :
          //                     v < 100 ? colors[0] : 'green';
          //   },
          //   sideBottomColor: (index, feature) => {
          //     if (feature === feat) {
          //       return [164, 241, 199, 0.5];
          //     }
          //     var v = feature.properties.health * 100;
          //     return v < 40 ? colors[8] :
          //       v < 50 ? colors[7] :
          //         v < 55 ? colors[6] :
          //           v < 60 ? colors[5] :
          //             v < 65 ? colors[4] :
          //               v < 70 ? colors[3] :
          //                 v < 75 ? colors[2] :
          //                   v < 80 ? colors[1] :
          //                     v < 100 ? colors[0] : 'green';
          //   },
          //   height: function (index, feature) {
          //     var v = feature.properties.health * 100;
          //     return 1000;
          //   },
          // });
        } else {
          text.hide();
        }
      });

      // var dat = new Loca.Dat();
      // dat.addLight(loca.ambLight, loca, '环境光');
      // dat.addLight(loca.dirLight, loca, '平行光');
      // dat.addLight(loca.pointLight, loca, '点光');
      // dat.addLayer(pl);

      // 生长动画
      // map.on('click', function () {
      //   pl.addAnimate({
      //     key: 'height',
      //     value: [0, 1],
      //     duration: 1000,
      //     easing: 'CubicInOut',
      //   }, function () {
      //     // console.log(123);
      //   });
      // });
    },
    boundsRequest(dataArr) { // 发送多个请求来获取所有子区域的边界信息

      // 存储所有http请求
      let reqList = []
      // 存储后台响应每个请求后的返回结果
      let resList = []
      const config = {}
      // const subDistrict = this.subDistrict
      // console.log(subDistrict);
      console.log(dataArr)
      for (let i = 0; i < dataArr.length; i++) { // 发送多个请求
        let req = axios({
          method: 'get',
          url: 'https://restapi.amap.com/v3/config/district',
          timeOut: 3000,
          params: {
            keywords: dataArr[i].name,
            subdistrict: 0,
            key: 'f1a02db4752a50aa85be4fc021f027d1',
            extensions: 'all'
          }
        })

        reqList.push(req)
        resList.push(('post' + (i + 1)).replace(/[']+/g, ''))
      }

      return axios.all(reqList).then(axios.spread(function (...resList) {
        return resList // 拿到所有posts数据
      }))

    },
    mapHollow() { // 地图反向镂空
      const that = this
      AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {

        initPage(DistrictExplorer);
      });

      function getAllRings(feature) {

        var coords = feature.geometry.coordinates,
          rings = [];

        for (var i = 0, len = coords.length; i < len; i++) {
          rings.push(coords[i][0]);
        }

        return rings;
      }

      function getLongestRing(feature) {
        var rings = getAllRings(feature);

        rings.sort(function (a, b) {
          return b.length - a.length;
        });

        return rings[0];
      }

      function initPage(DistrictExplorer) {
        //创建一个实例
        // console.log()
        var districtExplorer = new DistrictExplorer({
          map: that.map
        });

        const countryCode = 100000; // 全国代码
        const provCodes = [
            330000, // 浙江
            // 510000 //四川
          ],
          cityCodes = [
            330100,// 杭州
            330200, // 宁波
            330300, // 温州
            330400, // 嘉兴
            330500, // 湖州
            330600, // 绍兴
            330700, // 金华
            330800, // 衢州
            330900, // 舟山
            331000, // 台州
            331100, //丽水
          ];

        districtExplorer.loadMultiAreaNodes(
          //只需加载全国和市，全国的节点包含省级
          [countryCode].concat(cityCodes),
          function (error, areaNodes) {
            console.log(areaNodes)
            var countryNode = areaNodes[0],
              cityNodes = areaNodes.slice(1);

            var path = [];

            //首先放置背景区域，这里是大陆的边界
            path.push(getLongestRing(countryNode.getParentFeature()));

            for (let i = 0, len = provCodes.length; i < len; i++) {
              // 逐个放置需要镂空的省级区域
              path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));

            }

            for (let j = 0, len = cityNodes.length; j < len; j++) {
              //逐个放置需要镂空的市级区域
              path.push.apply(path, getAllRings(cityNodes[j].getParentFeature()));
            }

            //绘制带环多边形
            //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
            var polygon = new AMap.Polygon({
              bubble: true,
              lineJoin: 'round',
              strokeColor: 'red', //线颜色
              strokeOpacity: 1, //线透明度
              strokeWeight: 1, //线宽
              fillColor: 'black', //填充色
              fillOpacity: 1, //填充透明度
              map: that.map,
              path: path
            });
          });
      }
    },
    mapCover() { // 地图遮罩
      const map = this.map;
      new AMap.DistrictSearch({ // 地图遮罩
        extensions: 'all',
        subdistrict: 0
      }).search('浙江省', function (status, result) {
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ];
        var holes = result.districtList[0].boundaries

        var pathArray = [
          outer
        ];
        pathArray.push.apply(pathArray, holes)
        var polygon = new AMap.Polygon({
          pathL: pathArray,
          strokeColor: '#00eeff',
          strokeWeight: 1,
          fillColor: 'rgb(18,68,77)',
          fillOpacity: 1
        });
        polygon.setPath(pathArray);
        map.add(polygon)
      })
    },

    mapTrack() { // 加载地图轨迹

      // const lines = [
      //   {name: '杭州市--->嘉兴市',path: [[120.209947,30.245853],[120.755625,30.746631]]},
      //   {name: '杭州市--->绍兴市',path: [[120.209947,30.245853],[120.582886,30.051549]]},
      //   {name: '杭州市--->宁波市',path: [[120.209947,30.245853],[121.6216,29.859515]]},
      //   {name: '杭州市--->温州市',path: [[120.209947,30.245853],[120.699255,27.993805]]},
      //   {name: '杭州市--->台州市',path: [[120.209947,30.245853],[121.420737,28.655768]]},
      //   {name: '杭州市--->丽水市',path: [[120.209947,30.245853],[119.922863,28.467673]]},
      //   {name: '杭州市--->衢州市',path: [[120.209947,30.245853],[118.859314,28.970189]]},
      //   {name: '杭州市--->金华市',path: [[120.209947,30.245853],[119.647277,29.079056]]},
      //   {name: '杭州市--->湖州市',path: [[120.209947,30.245853],[120.086961,30.894123]]},
      // ]

      const lines = [{name: '起始', path: []}, {name: '结束', path: []}]
      // const tracks = this.tracks

      for (let i = 0; i < tracks.length; i++) { // 处理两条轨迹
        // const lng = tracks[i].lng
        // const lat = tracks[i].lat
        // lines[0].path.push([lng, lat])
        if (i < 18) {
          // const lng1 = tracks[i + 18].lng
          // const lat1 = tracks[i + 18].lat
          // lines[1].path.push([lng1, lat1])
        } else {
          // const lng2 = tracks[i - 18].lng
          // const lat2 = tracks[i - 18].lat
          // lines[1].path.push([lng2, lat2])
        }
      }
      console.log(lines)
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], (PathSimplifier, $) => {

        if (!PathSimplifier.supportCanvas) {
          alert('当前环境不支持 Canvas！');
          return;
        }

        //just some colors
        var colors = [
          "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
          "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
          "#651067", "#329262", "#5574a6", "#3b3eac"
        ];
        var emptyLineStyle = {
          lineWidth: 0,
          fillStyle: null,
          strokeStyle: null,
          borderStyle: null
        };
        var pathSimplifierIns = new PathSimplifier({ // 创建简单路径
          zIndex: 100,
          autoSetFitView: false,
          map: this.map, //所属的地图实例

          getPath: function (pathData, pathIndex) {

            return pathData.path;
          },
          getHoverTitle: function (pathData, pathIndex, pointIndex) {

            if (pointIndex >= 0) {
              //point
              return pathData.name;
            }

            return pathData.name;
          },
          renderOptions: {

            pathLineStyle: emptyLineStyle,
            pathLineSelectedStyle: emptyLineStyle,
            pathLineHoverStyle: emptyLineStyle,
            keyPointStyle: emptyLineStyle,
            startPointStyle: emptyLineStyle,
            endPointStyle: emptyLineStyle,
            keyPointHoverStyle: emptyLineStyle,
            keyPointOnSelectedPathLineStyle: emptyLineStyle,

          }
        });

        window.pathSimplifierIns = pathSimplifierIns;

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
        drawLines();

        function drawLines() {

          $('#loadingTip').remove();

          // console.log(lines)

          pathSimplifierIns.setData(lines);

          function onload() {
            pathSimplifierIns.renderLater();
          }

          function onerror(e) {
            console.log(('图片加载失败！'));
          }

          const imageUrl = 'public/icons/direction-bottom.png' // 引用图片
          const speed = 100000; // 图片移动速度
          const pathNavigatorStyle = { // 路径配置
            width: 24,
            height: 24,
            //使用图片
            content: PathSimplifier.Render.Canvas.getImageContent(imageUrl, onload, onerror),
            // content: imageUrl,
            strokeStyle: null,
            fillStyle: null,
            //经过路径的样式
            pathLinePassedStyle: {
              lineWidth: 6,
              strokeStyle: '#00e676',
              // dirArrowStyle: {
              //   stepSpace: 15,
              //   strokeStyle: 'red'
              // }
            }
          }
          // 创建巡航器
          for (let i = 0; i < lines.length; i++) {
            const navg = pathSimplifierIns.createPathNavigator(i, {
              loop: true,
              speed,
              pathNavigatorStyle,
            });
            navg.start();
          }
          // const navg = pathSimplifierIns.createPathNavigator(0, {
          //   loop: true,
          //   speed,
          //   pathNavigatorStyle,
          // });
          // navg.start();
        }
      });
    },
    getSubCitys(city) {
      // 获取市的下级所有区域
      let subDistrict = this.subDistrict // 保存下级区域
      let district = this.district;
      const map = this.map
      //实例化DistrictSearch
      var opts = {
        subdistrict: 1,   //获取边界不需要返回下级行政区
        extensions: 'base',  //返回行政区边界坐标组等具体信息
        level: 'city'  //查询行政级别为 市
      };
      district = new AMap.DistrictSearch(opts);

      //行政区查询
      // district.setLevel('city')
      var p = new Promise(function (resolve, reject) {
        district.search((city), function (status, result) {

          console.log(result);
          // var bounds = result.districtList[0].boundaries;

          subDistrict = result.districtList[0].districtList // 保存下级信息
          resolve(subDistrict)
          // if (bounds) {
          //   for (var i = 0, l = bounds.length; i < l; i++) {
          //     //生成行政区划polygon
          //     // var polygon = new AMap.Polygon({
          //     //   strokeWeight: 1, // 边界粗细
          //     //   path: bounds[i], // 填充路径
          //     //   fillOpacity: 0.7, // 填充透明度
          //     //   fillColor, // 填充颜色
          //     //   strokeColor: '#0091ea' // 边界颜色
          //     // });
          //     // polygons.push(polygon);
          //   }
          // }
          // map.add(polygons)
        })
      })
      return p
    },
    initMap() { // 地图初始化
      AMapLoader.load({ // 首次调用load
        key: 'b3d286b240801aae37a3e4242b7c8c86',//首次load key为必填
        version: '2.0',
        plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.DistrictSearch', 'AMap.ToolBar', 'AMap.Marker', 'AMap.LngLat', 'AMap.Driving', 'AMap.Polygon'],
        Loca: {
          version: '2.0.0',
        },
        AMapUI: {
          version: '1.1',
          plugins: ['overlay/SimpleMarker']
        }
      }).then((AMap) => {

        this.map = new AMap.Map('container', { // 创建地图
          center: [119.638315,29.883129],//中心
          viewMode: '3D', // 地图模式
          pitch: 60, // 地图俯仰角度，有效范围 0 度- 83 度
          showBuildingBlock: false,
          showLabel: true,
          mapStyle: 'amap://styles/0ac8d284c5f311b8849c035c7674e68f',
          //mapStyle: 'amap://styles/e8877b996ccb585b3f1a109e1d0940a2', //设置地图的显示样式,自定义地图
          //mapStyle: 'amap://styles/e8877b996ccb585b3f1a109e1d0940a2', //设置地图的显示样式,自定义地图
          layers: [ // 地图图层
            new AMap.TileLayer.RoadNet({
              zIndex: 1
            }),
            new AMap.TileLayer({
              zIndex: 6,
              opacity: 1,
              getTileUrl: 'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
            })],
          // zoom: 7.8,// 缩放级别
          zoom: 9,// 缩放级别
          dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
          keyboardEnable: false, //地图是否可通过键盘控制，默认为true
          doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
          zoomEnable: true, //地图是否可缩放，默认值为true
          rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
        });

        // this.loca = new Loca.Container({ // 新建Loca图例
        //   map:this.map
        // })

        // this.mapFill('杭州市', 'rgb(212,94,108)')
        // this.mapFill('金华市', 'rgb(186,192,40)')
        // this.mapFill('丽水市', 'rgb(186,192,40)')

        // const citys = ['衢州市', '温州市', '台州市', '绍兴市', '宁波市', '嘉兴市', '湖州市', '舟山市']
        // for (let i = 0; i < citys.length; i++) {
        //   this.mapFill(citys[i], 'rgb(51,143,118)')
        // }
        // this.mapCover();
        // this.areaFill();
        // this.mapTrack();
        this.getSubCitys('杭州市').then((data) => {
          return new Promise((resolve, reject) => {
            var x = this.boundsRequest(data)
            resolve(x)
          })
        }).then((data) => {
          this.mapGrow(data)

        })// 获取下级区域

        // this.mapGrow();
      }).catch((e) => {
        console.error(e);
      });
    }
  },
  mounted() {

    this.initMap();

  }
}
</script>
<style>
* {
  padding: 0;
  margin: 0;
}

.root {
  background: url("../../public/icons/bg-main.jpg") no-repeat;
  background-size: cover;
  /*padding: 1vh 1vw;*/
  width: 140vw;
  height: 98vh;
  color: #FFFFF0;
  user-select: none;
}

.top {
  background-image: url("../../public/icons/bg-top.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 9vh;
}

.amap-logo {
  display: none !important;
}

.amap-copyright {
  display: none !important;
}
</style>
<!--专用于图表的样式-->
<style>

.ct-series-a .ct-bar {
  stroke: rgb(212, 94, 108);
}

.ct-label {
  color: #FFF;
}

.ct-grids {
  display: none;
}

</style>
